<template>
	<view class="mainpadding beijingse" v-if="pageShow">
		<!-- 出生日期 -->
		<u-datetime-picker :show="riqishow" v-model="value1" :maxDate="Number(new Date())" :minDate="minDate"
			mode="date" @confirm="sjconfirm" confirmColor="#890101" @cancel="cancel"></u-datetime-picker>
		<!-- 服务门店 -->
		<u-popup :show="fwshow" @close="fwclose">
			<view class="mainpadding2">
				<view class="mainpadding">
					<view class="sanshier xiaohei textcenter fonweight">服务门店</view>
				</view>
				<view class="guanbi" @click="fwclose">
					<u-icon name="close" size="18"></u-icon>
				</view>
				<scroll-view scroll-y="true" style="height: 800rpx;">
					<view class=" mainpadding2s flexbetween margin_top" :class="PosId==item.PosId?'qianhov1':'qianhov'"
						v-for="item in mdList" :key="item.PosId"
						@click="PosId=item.PosId;md_Text=item.PosName;fwclose()">
						<view class="" style="width: 90%;">
							<view class="flexleft">
								<view class="xiaohui sanshier margin_right2 xiankuan" style="width: 400rpx;">
									{{item.PosName}}
								</view>
								<view class="xiaohui strongtext">距您{{httpRequest.returnKmUnit(Number(item.distance))}}
								</view>
							</view>
							<view class="flexleft margin_top1">
								<view class="margin_right1">
									<u-icon name="map" size="22"></u-icon>
								</view>
								<view class="xiaohui strongtext yhxk">{{item.adres}}</view>
							</view>
						</view>
						<view class="">
							<u-icon name="checkmark-circle-fill" v-if="PosId==item.PosId" color="#F99740"
								size="24"></u-icon>
							<u-icon name="checkmark-circle-fill" v-if="PosId!=item.PosId" color="#999"
								size="24"></u-icon>
						</view>
					</view>
				</scroll-view>
				<!-- <view class="bigbtn margin_top">确认</view> -->
			</view>
		</u-popup>
		<!-- 优惠券 -->
		<u-popup :show="yhqshow" @close="yhqclose">
			<view class="mainpadding">
				<view class="mainpadding">
					<view class="sanshier xiaohei textcenter fonweight">优惠券</view>
				</view>

				<view class="guanbi" @click="yhqclose">
					<u-icon name="close" size="18"></u-icon>
				</view>
				<scroll-view scroll-y="true" style="height: 800rpx;">
					<view class="ffffff mainpadding radius flexbetween margin_top dingwei" @click="selectyhq(item)"
						:class="user_coupon_id==item.id?'yixyh':'weixuanbox'" v-for="item in dataAll.usercouponlist"
						:key="item.id">
						<view class="">
							<view class="ershiba xiaohong textcenter">￥
								<text class="xiaohong sishi fonweight">{{item.price}}</text>
							</view>
							<view class="xiaohong strongtext margin_top1">{{item.name1 || ""}}</view>
						</view>
						<view class="flexbetween" style="width: 72%;">
							<view class="">
								<view class="strongtext" :class="user_coupon_id==item.id?'xiaocheng':'xiaohei'">
									{{item.name}}
								</view>
								<view class="strongtext margin_top1"
									:class="user_coupon_id==item.id?'xiaocheng':'xiaohui'">{{item.end_time_text}}</view>
							</view>
							<view class="flexright">
								<u-icon name="checkmark-circle-fill" v-if="user_coupon_id==item.id" color="#EB6529"
									size="24"></u-icon>
								<u-icon name="checkmark-circle-fill" v-if="user_coupon_id!=item.id" color="#999"
									size="24"></u-icon>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- <view class="bigbtn margin_top">确认</view> -->
			</view>
		</u-popup>
		<view class="" style="padding-bottom: 140rpx;">
			<view class="xiaohong strongtext">*
				<text class="xiaohei fonweight strongtext">为必填项</text>
			</view>
			<view class="mainpadding ffffff radius margin_top">
				<view class="flexbetween xiahuaxian">
					<view class="xiaohei ershiba">会员卡号</view>
					<input class="input" type="number" placeholder="此为微信绑定的手机号" disabled="" v-model="userinfo.mobile">
				</view>
				<view class="flexbetween xiahuaxian margin_top">
					<view class="xiaohei ershiba">姓名
						<text class="xiaohong ershiba"> *</text>
					</view>
					<input class="input" type="text" placeholder="请输入" v-model="Name">
				</view>
				<view class="flexbetween xiahuaxian margin_top">
					<view class="xiaohei ershiba">性别
						<text class="xiaohong ershiba"> *</text>
					</view>
					<view class="flexright">
						<u-radio-group v-model="sex" placement="row" circle>
							<u-radio activeColor="#feb800" :customStyle="{marginRight: '30rpx'}" label="男"
								name="1"></u-radio>
							<u-radio activeColor="#feb800" label="女" name="2"></u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="flexbetween xiahuaxian margin_top" @click="riqishow = true">
					<view class="xiaohei ershiba">出生日期</view>
					<view class="flexright">
						<input class="input" type="text" placeholder="请选择" disabled="" v-model="Birthday">
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
				<!-- <uni-data-picker @change="bindPickerChange" :localdata="items" popup-title="请选择地区"
					v-model="address.county">
					<view class="flexbetween xiahuaxian margin_top">
						<view class="xiaohei ershiba">居住地址</view>
						<view class="flexright">
							<input class="input" type="text" disabled placeholder="请选择住址" v-model="citytext">
							<u-icon name="arrow-right" color="#999999"></u-icon>
						</view>
					</view>
				</uni-data-picker> -->
				<view class="flexbetween xiahuaxian margin_top">
					<view class="xiaohei ershiba">居住地址</view>
					<input class="input" type="text" placeholder="请输入" v-model="jz_address">
				</view>
				<view class="flexbetween xiahuaxian margin_top">
					<view class="xiaohei ershiba">详细地址</view>
					<input class="input" type="text" placeholder="请输入" v-model="xx_address">
				</view>
				<view class="flexbetween xiahuaxian margin_top">
					<!-- <view class="flexbetween xiahuaxian margin_top" v-if="userinfo.rec_uid==0"> -->
					<view class="xiaohei ershiba flexleft ">
						<text class="margin_right">邀请码</text>
						<input type="text" v-model="invite_code" placeholder="请输入邀请码">
					</view>
					<view class="huanbtn flexcenter" @click="scanbarCode">
						<view class="margin_right1">
							<u-icon name="scan" color="#F48B42" size="28"></u-icon>
						</view>
						<view class="xiaocheng ershiba">扫一扫</view>
					</view>
				</view>

				<view class="flexbetween xiahuaxian margin_top" @click="yhqsx">
					<view class="xiaohei ershiba">优惠券抵用</view>
					<view class="flexright">
						<view class="xiaocheng ershiba margin_right2" v-if="!dataAll.cardinfo.is_usecoupon">抵扣券不可用
						</view>
						<view class="xiaocheng ershiba margin_right2" v-else-if="!dataAll.usercouponlist.length">暂无可用优惠券
						</view>
						<view class="xiaocheng ershiba margin_right2" v-else-if="!user_coupon_id">
							共{{dataAll.usercouponlist.length}}张优惠券</view>
						<view class="xiaocheng ershiba margin_right2" v-if="user_coupon_id">已选择</view>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
				<view class="flexbetween xiahuaxian margin_top" @click="fwshow = true">
					<view class="xiaohei ershiba">服务门店
						<text class="xiaohong ershiba"> *</text>
					</view>
					<view class="flexright">
						<view class="xiaocheng ershiba xiankuan textright margin_right2">{{PosId?md_Text:"请选择"}}</view>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
				<view class="flexbetween  margin_top">
					<view class="xiaohei ershiba">支付方式
						<text class="xiaohong ershiba"> *</text>
					</view>
					<view class="flexright">
						<u-radio-group v-model="pay_type" placement="row" circle>
							<u-radio activeColor="#feb800" label="微信支付" name="10"></u-radio>
							<!-- <u-radio activeColor="#feb800" label="余额支付" name="30"></u-radio> -->
						</u-radio-group>
					</view>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb ffffff mainpadding">
			<view class="bighbtn" @click="submit()">支付 ￥{{dataAll.pay_info.pay_price}}元/{{dataAll.cardinfo.days}}天
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "../static/city/city.js"
	export default {
		data() {
			return {
				httpRequest,
				pageShow: false,

				yhqshow: false, // 优惠券
				fwshow: false, //服务门店
				address: {
					province: "", //省
					city: "", //市
					county: "", //区
				},
				citytext: [], //收获地址
				items: citys.data,
				value1: Number(new Date()),
				riqishow: false, //时间
				card_id: "", //会员卡id
				user_coupon_id: "", //抵扣券id
				PosId: "", //开卡门店
				Name: "",
				sex: "1",
				Birthday: "",
				jz_address: "",
				xx_address: "",
				pay_type: "10",
				invite_code: "",
				userinfo: {},
				dataAll: {},
				lat: "35.17466",
				lng: "109.67307",
				mdList: [],
				md_Text: "",
				openid: "",
				minDate: 0,
			}
		},
		onLoad(options) {
			this.minDate = Number(new Date('1950-01-01'));
			// this.invite_code = uni.getStorageSync("invite_code") || ""
			this.card_id = options.id
			// #ifdef MP-WEIXIN
			this.getlocations()
			// #endif
			// #ifdef H5
			this.getmdList()
			// #endif
			this.getopenid()
			this.init()
			this.getinfo()
		},
		watch: {
			user_coupon_id() {
				this.init()
			}
		},
		methods: {
			yhqsx() {
				if (!this.dataAll.cardinfo.is_usecoupon) {
					// httpRequest.toast("当前选择会员卡种")
					return false
				}
				if (!this.dataAll.usercouponlist.length) {
					// httpRequest.toast("暂无可用优惠券")
					return false
				}
				this.yhqshow = true
			},
			selectyhq(item) {
				if (Number(item.price) > Number(this.dataAll.pay_info.pay_price)) {
					httpRequest.toast("使用的优惠券不能大于支付金额")
					return false
				}
				this.user_coupon_id = item.id;
				this.yhqshow = false;
			},
			getopenid() {
				let _this = this
				uni.login({
					success(res) {
						if (res.code) {
							httpRequest.request('/api/user/getopenid', 'GET', {
								code: res.code
							}).then(resp => {
								_this.openid = resp.data.openid
							}).catch(err => {})
						}
					}
				})
			},
			scanbarCode() {
				let that = this
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						console.log('信息：', res.result);
						let index = res.result.lastIndexOf("code=")
						let result = res.result.substring(index + 5, res.result.length)
						that.invite_code = result
					},
					fail(err) {
						console.log('错误信息：' + err);
					}
				});

			},
			submit() {
				uni.showLoading({
					title: "请稍后",
					mask: true,
				})
				if (this.Name == "") {
					httpRequest.toast("请输入姓名")
					return false
				}
				// if (this.Birthday == "") {
				// 	httpRequest.toast("请输入选择出生日期")
				// 	return false
				// }
				// if (this.jz_address == "") {
				// 	httpRequest.toast("请输入输入居住地址")
				// 	return false
				// }
				// if (this.xx_address == "") {
				// 	httpRequest.toast("请输入详细地址")
				// 	return false
				// }
				if (this.PosId == "") {
					httpRequest.toast("请选择门店")
					return false
				}
				if (this.pay_type == "") {
					httpRequest.toast("请选择支付方式")
					return false
				}
				let data = {
					card_id: this.card_id,
					user_coupon_id: this.user_coupon_id,
					PosId: this.PosId,
					Name: this.Name,
					sex: this.sex,
					Birthday: this.Birthday,
					jz_address: this.jz_address,
					xx_address: this.xx_address,
					pay_type: this.pay_type,
					invite_code: this.invite_code,
					openid: this.openid
				}
				if (this.userinfo.rec_uid) {
					delete data.invite_code
				}
				httpRequest.request('/api/cardcl/create_order', 'POST', data).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						if (this.pay_type == 30) {
							httpRequest.toast(res.msg)
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/mine"
								})
							}, 1000)
						} else {
							if (this.dataAll.pay_info.pay_price == 0) {
								httpRequest.toast("购买成功")
								setTimeout(() => {
									uni.switchTab({
										url: "/pages/mine"
									})
								}, 1000)
							} else {
								this.callPayMent(JSON.parse(res.data.wxconfig))
							}
						}
					} else {
						httpRequest.toast(res.msg)
					}

				})
			},
			callPayMent(data) {
				let _this = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: data.signType,
					paySign: data.paySign,
					success: function(res) {
						// 支付成功
						uni.switchTab({
							url: "/pages/mine"
						})
					}
				});
			},
			getlocations() {
				console.log(1212);
				let _this = this
				uni.getLocation({
					type: 'wgs64',
					success: function(res) {
						console.log(res, "获取位置成功");
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.getmdList()
					},
					fail(err) {
						uni.showModal({
							content: '检测到您没打开定位功能权限，是否去设置打开？',
							confirmText: "确认",
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({ //opensetting是调起设置页面的
										success: (res) => {
											console.log(res.authSetting);
											if (res.authSetting ==
												true) { //判断res.authsetting的值是true还是false
												_this.getlocations()
											} else {
												_this.getlocations()
												console.log("拒绝授权");
											}
										}
									})
								} else {
									console.log('取消');
									return false;
								}
							}
						})
						console.log(err, "cuowu");
					}
				});
			},
			getinfo() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userinfo = res.data

				})
			},
			init() {
				httpRequest.request('/api/cardcl/cardSure', 'GET', {
					card_id: this.card_id,
					user_coupon_id: this.user_coupon_id,
				}).then(res => {
					if (res.code == 1) {
						this.pageShow = true
						this.dataAll = res.data
					} else {
						httpRequest.toast(res.msg)
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			getmdList() {
				httpRequest.request('/api/index/shopIndex', 'GET', {
					lat: this.lat,
					lng: this.lng,
				}).then(res => {
					this.mdList = res.data
				})
			},
			cancel() {
				this.riqishow = false
			},
			timereturn(time3) {
				//将时间戳格式转换成年月日时分秒
				var date = new Date(time3);
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';

				var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
				var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
				var strDate = Y + M + D + h + m;
				return strDate
			},
			// 开始时间
			sjconfirm(e) {
				console.log(e)
				this.riqishow = false
				this.Birthday = httpRequest.returnDate(e.value)
			},
			bindPickerChange(val) {
				let area = val.detail.value
				let area1 = [area[0].text, area[1].text, area[2].text];
				this.citytext = area1.join("/")
				this.address.province = area[0].value;
				this.address.city = area[1].value;
				this.address.county = area[2].value;

				console.log(this.address)
			},
			// 优惠券
			yhqclose() {
				this.yhqshow = false
				// console.log('close');
			},
			// 服务门店
			fwclose() {
				this.fwshow = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.qianhov {
		background: #F2F2F2;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.qianhov1 {
		border: 1rpx solid #EE6F2D;
		background: #F2F2F2;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.weixuanbox {
		background: #F2F2F2;
		border: 1rpx solid #999;
	}

	.yixyh {
		border: 1rpx solid #ED6C2C;
	}

	.guanbi {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	.input {
		// width: 160rpx;
		text-align: right;
	}

	.huanbtn {
		width: 176rpx;
		height: 70rpx;
		border-radius: 35rpx 35rpx 35rpx 35rpx;
		border: 1rpx solid #F48538;
	}

	.weixz {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid #999999;
		border-radius: 50%;
	}
</style>